import { Component } from 'react';
import classNames from 'classnames';
import styles from './index.less';
import { Icon,Tooltip,Tab,Tabs,Button } from '@blueprintjs/core';
import Center from './center/Center';
import HeadNav from './headnav/HeadNav';
import Lists from './leftpan/lists/Lists.js';
import LeftPan from './leftpan/LeftPan';
import RightPan from './rightpan/RightPan';
import Tool from './components/Tool';
import FilterPanel from './leftpan/Filter';
import { connect } from 'dva';
import Search from './components/Search';
import {isAccountOnline} from '../../api/sign';
import router from 'umi/router';
import {updateState} from '../../models/global';
import {contain} from '../../utils/util';

class Admin extends Component {
    constructor(props) {
        super(props);
        this.state = {
          selectedFeature: null, // 点击选中的详情
          h5: true,
          tab: 'normal'
        }
    }

    handleTabChange = (val) => {
      this.setState({tab: val})
    }

	checkH5 = () => {
		if(!window.localStorage) {
			this.setState({h5: false})
		}
	}

    componentWillMount() {
        // 加载前检查是否登录
        isAccountOnline((isLogined) => {
            if(!isLogined) {
                router.push('/login');
            }
        });
		this.checkH5();
	}

	setSelectedFeature = (f) => {
		this.setState({selectedFeature: f})
	}

	sync = (current) => {
		const {map, baiduMap, tiandituMap, gaodeMap, mouseInMap, syncMap} = this.props;
		if(!map) return;
		const syncMapSize = syncMap ? syncMap.length: 0;
		// const radio = syncMapSize3e
		switch(mouseInMap) {
			case "map":
				if(current === "map") {
					var center = map.getCenter().toArray();
					var zoom = Math.ceil(map.getZoom());
					if(baiduMap) {
						var bd09 = coordtransform.wgs84tobd09(center[0], center[1]);
						baiduMap.centerAndZoom(new BMap.Point(bd09[0],bd09[1]), zoom + 2);
					}
					if(gaodeMap) {
						var gcj02 = coordtransform.wgs84togcj02(center[0], center[1]);
						gaodeMap.setCenter(gcj02);
						gaodeMap.setZoom(zoom + 1);
					}
					if(tiandituMap) {
						tiandituMap.centerAndZoom(new T.LngLat(center[0], center[1]), zoom + 1);
					}
				}
				break;
			case "baidu":
				if(baiduMap && current === "baidu") {
					var center = baiduMap.getCenter();
					var zoom = baiduMap.getZoom();
					center = coordtransform.bd09towgs84(center.lng, center.lat);
					map.setCenter(center);
					map.setZoom(zoom - 2);
					if(gaodeMap) {
						var gcj02 = coordtransform.wgs84togcj02(center[0], center[1]);
						gaodeMap.setCenter(gcj02);
						gaodeMap.setZoom(zoom - 1);
					}
					if(tiandituMap) {
						tiandituMap.centerAndZoom(new T.LngLat(center[0], center[1]), zoom - 1);
					}
				}
				break;
			case "gaode":
				if(gaodeMap && current === "gaode") {
					const center = gaodeMap.getCenter();
					const wgs84center = coordtransform.gcj02towgs84(center.lng, center.lat);
					const zoom = gaodeMap.getZoom();
					map.setCenter(wgs84center);
					map.setZoom(zoom - 1);
					if(baiduMap) {
						var bd09 = coordtransform.wgs84tobd09(wgs84center[0], wgs84center[1]);
						baiduMap.centerAndZoom(new BMap.Point(bd09[0],bd09[1]), zoom + 1);
					}
					if(tiandituMap) {
						tiandituMap.centerAndZoom(new T.LngLat(wgs84center[0], wgs84center[1]), zoom);
					}
				}
				break;
			case "tianditu":
				if(tiandituMap && current === 'tianditu') {
					let center = tiandituMap.getCenter();
					center = [center.getLng(), center.getLat()];
					let zoom = tiandituMap.getZoom();
					if(baiduMap) {
						const bd09 = coordtransform.wgs84tobd09(center[0], center[1]);
						baiduMap.centerAndZoom(new BMap.Point(bd09[0],bd09[1]), zoom + 1);
					}
					if(gaodeMap) {
						const gcj02 = coordtransform.wgs84togcj02(center[0], center[1]);
						gaodeMap.setCenter(gcj02);
						gaodeMap.setZoom(zoom);
					}
					if(map) {
						map.setZoom(zoom - 1);
						map.setCenter(center);
					}
				}
				break;
			default:
				break;
		}
	}


    render() {
		const {map, roadDataset, syncMap, ssearch_map, listType} = this.props;
		const { selectedFeature,tab } = this.state;
		// 对比地图数量
		const syncMapSize = syncMap ? syncMap.length : 0;
		// this.updateSyncMap();

        return (
          <div className={classNames(styles.main, "dm-admin")} id={this.state.con_id}>
              <HeadNav sync={this.sync} {...this.props} />
              <div className={classNames(styles.listCenter)}
              style={{display: listType === "map" ? "none" : "block"}}>
                <Lists />
                <Tooltip className={classNames(styles.listIcon)} content="切换地图模式" position="left">
                    <Icon icon="caret-left" iconSize={20}
                       onClick={() => {
                      updateState({listType: 'map'}) }}/>
                </Tooltip>
              </div>
              <div className={classNames(styles.center, 'clearfix')}
               style={{display: listType === "map" ? "block" : "none"}}>
                <div className={styles.leftPane}>
                  <Tabs large className={styles.toptabs} onChange={this.handleTabChange} selectedTabId={this.state.tab}>
                    <Tab id="normal" className={styles.toptab} title="行政列表"
                      panel={
                        <div className={styles.tabDiv}>
                          <LeftPan setSelectedFeature={this.setSelectedFeature} />
                          {/* <Tooltip className={classNames(styles.listIcon)} content="切换列表模式" position="right">
                              <Icon icon="caret-right" iconSize={20}
                                 onClick={() => {
                                updateState({listType: 'list'}) }}/>
                          </Tooltip> */}
                        </div>
                      }>
                    </Tab>
                    {/* <Tab id="filter" className={styles.toptab} title="标签筛选"
                      panel = {<FilterPanel />}
                    ></Tab> */}
                  </Tabs>
                </div>
                {/* 系统地图 */}
                <div style={{display: ssearch_map ? 'none' : 'block'}} className={classNames(
                  syncMapSize === 0 ? styles.mapPane : (syncMapSize <= 2 ? styles.map2First: classNames(styles.map4First, styles.map4Unit)))}>
                  <Center setSelectedFeature={this.setSelectedFeature} sync={this.sync} />
                </div>
                {/* 第二个地图 */}
                <div style={{display: ssearch_map ? 'none' : 'block'}} className={classNames(syncMapSize === 0 ? styles.mapHidden : syncMapSize === 1 ? styles.map2Second : classNames(styles.map4Unit, styles.map4Second))}>
                  <div id="mapContainer1"></div>
                </div>
                {/* 第三个地图 */}
                <div style={{display: ssearch_map ? 'none' : 'block'}} className={classNames(syncMapSize < 2 ? styles.mapHidden :classNames(styles.map4Unit, styles.map4Three))}>
                  <div id="mapContainer2"></div>
                </div>
                {/* 第四个地图 */}
                <div style={{display: ssearch_map ? 'none' : 'block'}} className={classNames(syncMapSize < 3 ? styles.mapHidden :classNames(styles.map4Unit, styles.map4Four))}>
                  <div id="mapContainer3"></div>
                </div>
                {/* 高级查询地图 */}
                <div style={{display: ssearch_map ? 'block' : 'none'}} className={classNames(styles.ssearch_map)}>
                  <div id="ssearchmapContainer3">这里是高级查询时候的地图</div>
                </div>
                {selectedFeature && <RightPan feature={selectedFeature}
                  closeAttributePane={() => {this.setState({selectedFeature: null})}} /> }

                <div className={classNames(styles.toolPane, syncMapSize > 0 && styles.toolPaneLeft )}>
                  <Tool map={map} />
                </div>
                <div className={styles.searchPane} style={{display:tab === "normal"?"block":"none"}}>
                  <Search setSelectedFeature={this.setSelectedFeature} map={map} roadDataset={roadDataset} />
                </div>
              </div>
              <div className={classNames(this.state.h5 ? '' : styles.no_h5)}>
                <p>当前浏览器不支持H5,请<a href="http://down.360safe.com/cse/360cse_11.0.2116.0.exe">下载</a>支持H5的浏览器!</p>
              </div>
          </div>
        )
    }
}

function mapStateToProps(state) {
    return {
		map: state.map.map,
		countryDataset: state.map.countryDataset,
        streetDataset: state.map.streetDataset,
		roadDataset: state.map.roadDataset,
		syncMap: state.map.syncMap, // 地图分屏
		baiduMap: state.map.baiduMap,
		gaodeMap: state.map.gaodeMap,
		tiandituMap: state.map.tiandituMap,
		mouseInMap: state.map.mouseInMap,
    ssearch_map: state.map.ssearch_map,
    listType: state.map.listType
    };
}

export default connect(mapStateToProps)(Admin);
